Code Garden

Appearance

js-05 函数 ​

一、函数的作用 ​

  1. 主要用来储存一段代码，

  2. 代码重复使用，大量减少代码量

二、函数声明及调用 ​

  1. 普通声明：function name(){content}
  2. 表达式声明: var fn = function(){countent}，
  3. 函数调用：name()；
  4. 函数的length属性，为形参的个数;

函数注意事项 ​

  • 函数调用时，是不分先后的；

  • 在任何地方给一个已经声明且赋值的变量再重新声明，重新声明都是无效的。

  • 函数重复声明时，后面的函数会覆盖前面的函数；

  • 如果先用函数表达式声明的，后面声明的普通函数是不能覆盖前面的函数，如果前面是普通声明，后面是表达式声明，则照常执行；

JS
var x = function () { alert(1) };
x();    //1
function x() { alert(3) };
x();     //1


function x() { alert(3) };
x();     //3
var x = function () { alert(1) };
x();    //1

面试题：

js
var x = 1;
var y = 0;
var z = 0;
function add(n){return n=n+1;}
y = add(x);
function add(n){return n=n+3;}
z = add(x);
s=y+z;

y和z都是4，后面定义的影响到前面定义的；

函数放在其他位置 ​

  1. 对象中的函数时

    js
    var aa = {name:"张三",fn:function(){循环体}}
aa.fn();

    经常使用于函数过多，变量名重复；

  2. 数组中的函数时

    js
    var ary = [1,2,function(){}] 
// 调用：ary[3]()

三、全局函数 ​

JavaScript 中包含以下 7 个全局函数，用于完成一些常用的功能：

escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、parseInt( )、unescape( )。

注意：setTimeout 不是js的全局函数，是window的全局函数

四、封装函数 ​

  1. 写出主体代码；

  2. 找出可变的变量，用形参代替；

  3. 放到函数中；

  4. 调用函数并检查；

五、事件处理函数 ​

obox.onclick = aa;

事件处理函数当中，函数后面不需要跟小括号；

六、函数参数的类型： ​

  1. 形参和实参

    • 创建：function 函数名(形参){} 多个形参用逗号隔开；

    • 调用：函数名(实参);

    注意：

    • 形参比实参多，多出来的形参值为undefined；

    • 实参比形参多，多出来的实参不参与计算，等于没有被识别；

  2. arguments

    它是一个对象，是一个类数组（有长度，可以循环，不能使用数组的方法）；

    类似于数组，数据由实参决定，arguments是函数的内置对象；

    当使用一个函数不知道这个函数可以使用哪些形参时，可以利用arguments获取可以使用的形参；可以使用下标方式取值，比如：arguments[0]；

    js
    //查询map函数有哪些形参可用；
ary.map(function(){
    console.log(arguments)
})

七、回调函数 ​

  1. 把函数作为实参传递到另一个函数当中，为回调函数；

  2. 回调函数是某个操作或某个动作做完以后调用的函数。

回调函数实例：

js
function add(a,b){
    return a + b;
}
function fn(num1,num2,func){   //这里fn用来传入一个函数；
    return func(num1,num2);
}
console.log(fn(10,20,add)); //这里不能使用小括号，因为在fn函数里面已经调用小括号了；

八、递归函数 ​

  1. 在函数中自己调用自己，也可以是一个for循环；

  2. 递归一定要有结束条件；

递归： 斐波那契数列第几个数是什么；

js
function fn(n){
	if(n===1 || n===2) return 1;        必须return 1个数值
	return fn(n-1) + fn(n - 2);
}


// 求n个数字的和;   递归函数自己调用自己;
function fn(n){
    if(n == 1) return 1;
    return n + fn(n-1)
}
console.log(3);
// 3 + fn(2)
// 3 + (2 + fn(1))
// 3 + (2 + (1))

尾递归 ​

  1. 什么是尾调用：指某个函数的最后一步是调用另一个函数

    js
    // 这种情况叫尾调用
function f(x){
    return g(x)
}

// 这种情况不叫尾调用
function f(x){
    let y = g(x)
    return y
    // 调用函数g后还有别的操作,不叫尾调用;
}
// 情况二 也不叫尾调用
function f(x){
    return g(x)+1  //调用后还有操作;
}

  2. 尾递归：函数调用自身，称为递归，如果尾调用自身，称为尾递归

    递归非常耗费内存，因为需要同时保存成千上百个调用记录，很容易发生栈溢出错误，对于尾递归来说，由于只存在一个调用记录，所以永远不会发生栈溢出错误；

    递归保存n个调用记录，时间复杂度：O(n)

    尾递归只保留一个调用记录，时间复杂度：O(1)

    js
    // 递归写法
function fabonacci(n){
    if(n===1 || n===2) return 1
    return fabonacci(n-1) + fabonacci(n-2) 
     //一直在进行记录,数值过大栈溢出;
}

// 尾递归写法;
function fabonacci(n,start=1,total=1){
    if(n===1 || n===2) return total
    return fabonacci(n-1, total, start+total) 
}
/**
 * 尾递归斐波那契分析：
 * 第一个为次数,第二个为保留上一次的结果,第三个用于返回的结果;
 * 假如传入10,第一次为 9 1 2
 * 第二次为  8 2 3
 * 第三次为  7 3 5
 * 最后一位依次为:  2  3  5  8
 * 在es6中，只要使用尾递归，就不会发生栈溢出，相对节省内存；
 */

function fib(n) {
    let p = 0, c = 1;
    while(n--) 
      [p, c] = [c, p + c]
    return p;
}

九、作用域 ​

每个函数都有自己的执行期上下文，每个执行期上下文都有自己的变量对象；

全局变量的作用域 ​

  1. 用var声明的变量，可以在全局使用；

  2. 除了在函数内部定义的变量都是全局变量；

  3. 全局作用域声明的变量、函数会变成window的方法或属性。

  4. 全局变量如果页面不关闭，全局变量就不会释放，就会占空间，消耗内存，所以尽可能的在函数里面使用局部变量；

局部变量 ​

在函数内部定义的变量是局部变量，

块级作用域 ​

花括号里面声明的变量只能在花括号当中使用，比如：if语句和for循环语句；

但是在js当中，外面也能使用花括号的变量，因为在js里没有块级作用域，只有函数除外，在es6里面let声明的变量有作用域；

隐式全局变量 ​

  1. 声明变量没有var，就叫隐式全局变量；

  2. 如果在函数里面声明变量没有var，函数执行之后，外面也能拿到函数里面的变量；

注意：

  • 全局变量是不能被删除的，隐式全局变量时可以被删除的；

  • 定义变量使用var是不能被删除的，没有var是可以删除的；

delete 变量 删除变量。

[[scope]] ​

（这里跳过，建议去看视频，推荐渡一教育的视频，作用域讲的比较详细）

作用域是因为由函数的产生而产生的作用域；

每个javascript函数也是一个对象，函数叫类对象，函数可以访问它的name属性和prototype属性，但有些属性是不能访问的，比如[[scope]]，这些属性仅javascript引擎存取；

AO(Active Object)是执行期上下文，记录了该环境中所有声明的参数，变量和函数；

GO(Global Object)是全局产生的执行期上下文；

全称：VO(variable)，AO是正在执行的VO，GO全局中的VO；

[[scope]]是隐式的属性，不能拿出来，我们不能访问，系统可以用，里面存储了执行期上下文(AO)的集合。

执行期上下文：

当一个函数执行时，会创建一个称为执行期上下文(AO)的内部对象，

一个执行期上下文定义了一个函数执行时的环境，

函数每次执行时对应的执行上下文都是独一无二的，所以多次调用一个函数会导致创建多个执行上下文，

当函数执行完毕，它所产生的执行上下文被销毁；

查找变量，从作用域链的顶端依次向下查找；

作用域链：[[scope]]中存储的执行期上下文对象的集合，这个集合呈链式链接，我们把这种链式链接叫作用域链；

每一个函数都有一个执行期上下文的集合，叫作用域链；

当一个函数被创建时，就可以访问fn.name，fn.[[scope]]

fn.[[scope]]里面存放了一个0，0指向GO，global Object；

一个函数被定义时，可以访问[[scope]]，里面储存的是GO，一个函数执行之后会产生一个新的执行期上下文，存的是AO，GO被压下去了，变成了第1位，AO在第0 位，在最顶端；

当函数里面还有函数时，子函数可以访问父函数的劳动成果，可以访问父函数的[[scope]]，里面还存有自己的执行期上下文(AO)；

查找一个变量，scope会从顶端开始查找作用域链，如果顶端查找不到就会查找下一个；

函数在被调用执行时，会创建一个当前函数的执行期上下文，在该执行期上下文的创建阶段，变量对象、作用域、闭包、this指向会分别被确定，而一个JavaScript程序中一般来说会有多个函数，JavaScript引擎使用调用栈来管理这些函数的调用顺序，函数调用栈的调用顺序与栈数据结构一致；

例子：

a定义之后会产生一个scope，scope里面储存的是全局的执行上下文GO，之后a被执行，产生了一个AO，被放到了scope的最顶端，形成了一个新的作用域链，

js
function a(){
    function b(){
        var b = 234;
    }
    var a = 123
    b();
}
var glob = 100
a()

image

javascript变量的生命周期

JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。

十、作用域链： ​

从内到外查找，先找自己局部区域有没有，再往外一层

作用域链：[[scope]]中所存储的执行期上下文（AO）对象的集合，这个集合呈链式链接，我们把这种链式链接叫作用域链；

十一、预解析（变量提升） ​

  1. 执行代码前，会先找页面中的（var 和 function），找出来之后并把变量赋值为undefined，函数永远是最后提升的

  2. 逐行解析：遇到赋值表达式时，会将值重新赋值给变量；

  3. 变量的提升：只会在当前的作用域中提升，提升到当前的作用域的最上面； 函数中的变量只会提前到函数的作用域最前面，不会提升到外面去；

作用域预解析必背四个步骤

  • 创建AO/GO对象，

  • 变量提升并赋值undefined

  • 形参实参相统一;

  • 函数永远是最后提升的，函数最后提升到最上面；

js
// 由于函数最后提升,先提升var,赋值undefined,之后提升function,a被赋值函数,因此第一个打印函数;
// 之后a又被赋值,因此之后的值一直是a的,function已经被提升到最上面了;
console.log(a);
function a(){
    console.log("aaaa");
}
var a = 1;
function a(){
    console.log('bbbb')
}
console.log(a);

十二、this ​

this定义 ​

  • 函数中的this指向，不是在定义的时候确定的，而是在调用的时候确定的；

  • 当事件放到循环里面时，是拿不到i的，需要用this代替这个，比如：

js
for(var i=0;i<oli.length;i++){
    oli[i].onmouseover = function(){
        this.style.display = "block";    //事件里面的i是无法获取到会报错的;这个this代表划过的这个；
}

  • this可以在js任何地方使用，位置不同指向不同，

  • 全局的任何地方都可以调用，window是页面中最大的对象，

this指向 ​

（1）触发当前事件的对象；

（2）普通函数的this指向window；

（3）构造函数的this指向实例对象；

（4）方法中的this指向实例对象；

（5）原型中的this指向实例对象

（6）定时器中的this指向window；

（7）函数作为某个对象的方法时，this指向这个对象；

（8）函数作为某个数组的数据时，this指向这个数组；

总结：执行代码前，会把变量的声明提前，变量值为undefined，当遇到变量值时，并给变量赋值；

面试题2：

js
fn();
console.log(c);
console.log(b);
console.log(a);
function fn(){
    var a=b=c=1;
    console.log(c);
    console.log(b);
    console.log(a);
}

解答： 执行完是这样的：

js
function fn(){
    var a=undefined;
    a = 1;
    b=1;
    c=1;
}     //只有b和c没有var，是隐式全局变量，所以外面可以拿到值，a被声明了是局部变量，所以a报错了；

相同题：

js
var a,b
(function(){
    alert(a);
    alert(b);
    var a=b=3;
    alert(a);
    alert(b);
}());
alert(a);
alert(b);

面试题3：

js
f1();
var f1=function(){
console.log(a);
var a = 10;}

解答：

js
var f1;
f1();
f1=function(){};    //var声明的函数，函数为表达式，是赋值的，变量名会提前，；f1找不到；

面试题4：

js
var color = 'green';
var test4399 = {
    color:'blue',
    getColor:function(){
        var color = 'red';
        alert(this.color);
    }
}
var getColor = test4399.getColor;
getColor();
test4399.getColor();

解答：

第一个执行结果是：window.getColor() this指向window，是green；

第二个执行结果：test4399.getColor()；this指向test4399，是blue；

十三、函数返回值 ​

  1. 函数调用以后的结果，就是return后面的值；
  2. 如果没有return，则返回undefined；
  3. return 后面的代码不会再执行；
  4. return后面有什么，最终返回结果就是什么；
  5. 直接调用函数，需要使用一个变量接收一下函数；
  6. 如果函数return后面没有任何值，返回结果将会是undefined；

总结：使用return就必须有返回值，要么就永远不使用；

return 返回多个值时，只能返回最后一个值，如果需要返回多个值可以放到一个数组当中，或对象中返回；

返回值的类型可以是js中数据类型中的任何一个；

面试题：

js
var x = 1, y = z = 0;
function add(n) {
    n = n + 1;
};
y = add(x);
function add(n) {
    n = n + 3;
};
z = add(x);
console.log(x,y,z);

解答： 两个函数都没有return 返回值，所有x和y都为undefined;

十四、函数注释 ​

image

实例：

js
/**
*
*@param num {Number} 数字
*@param str {String} 名称
*@return {Boolean} true:成年 false:未成年
* @type { import('vite').UserConfig } // 使用ts类型
*/
function check(num,str){
    if(num === 18) {
        return true
    }
}

其他函数调用方式 ​

js
function fn(one, two, three){
    console.log(one, two, three)
}
const a = 'hh'
const b = 'ss'
fn`this a is ${a} and b is ${b}`

使用模板字符串调用函数时：

  • 第一个参数：数组，包含模板字符串分割的字符串
  • 第二个参数：模板字符串的第一个变量，后面的变量以此类推

高频面试题 ​

● 写一个获取非行间样式的函数

● 说说你对作用域链的理解？

● var x = 1, y = z = 0; function add(n) { n = n + 1; }; y = add(x); function add(n) { n = n + 3; }; z = add(x); console.log(x,y,z);

● 请解释变量提升？

● 函数声明和函数表达式声明的区别？

● JavaScript 两种变量范围有什么不同？

Released under the MIT License.

Copyright © 2022-备案号：京ICP备2022004926号-1